<template>
    <!-- 面板模板组件 -->
    <component :is="chartBorderComponent[formatData.border]"
        :color="[formatData.borderColor1, formatData.borderColor2]">
        <div v-menus:right="menus" class="show-panel" :style="{ padding: formatData.padding }">
            <div class="panel-itm-top"
                :style="{ height: formatData.nameHeight, backgroundColor: formatData.backgroundColor, fontSize: formatData.nameFontSize, color: formatData.nameFontColor }">
                <div> {{ formatData.text.name }}</div>
            </div>
            <div class="panel-itm-line"
                :style="{ height: formatData.lineHeight, backgroundColor: formatData.lineBackgroundColor }">
            </div>
            <div class="panel-itm-bottom"
                :style="{ display: 'flex', height: 'calc( 100% - ' + formatData.nameHeight + ' - ' + formatData.lineHeight + ')' }">
                <div style="flex: 1; height: 100%;" class="panel-itm-bottom-itm panel-itm-bottom-left">
                    <div class="panel-itm-bottom-itm-title"
                        :style="{ height: formatData.titleHeight, fontSize: formatData.titleFontSize, color: formatData.titleFontColor }">
                        <div>{{ formatData.text.titleLeft }}</div>
                    </div>
                    <div class="panel-itm-bottom-itm-content"
                        :style="{ height: 'calc( 100% - ' + formatData.titleHeight + ')', color: formatData.contentFontColor, fontSize: formatData.contentFontSize }">
                        <div>{{ formatData.text.contentLeft }}</div>
                    </div>
                </div>
                <div style="flex: 1;height: 100%;" class="panel-itm-bottom-itm panel-itm-bottom-right" :style="{}">
                    <div class="panel-itm-bottom-itm-title"
                        :style="{ height: formatData.titleHeight, fontSize: formatData.titleFontSize, color: formatData.titleFontColor }">
                        <div>{{ formatData.text.titleRight
                            }}</div>
                    </div>
                    <div class="panel-itm-bottom-itm-content"
                        :style="{ height: 'calc( 100% - ' + formatData.titleHeight + ')', color: formatData.contentFontColor, fontSize: formatData.contentFontSize }">
                        <div>{{ formatData.text.contentRight }}</div>
                    </div>
                </div>
            </div>

        </div>
        <config ref="refConfig" @propsDataEv="propsDataEv" />
    </component>
</template>

<script setup>

import { ref, inject, onUnmounted, shallowRef, onMounted, computed, onActivated } from 'vue'
import { myScale } from '@/utils/myScale.js'
import { chartBorderComponent } from '@/utils/chart.js'
import { ChartGetDataListPost } from '@/api/chart/index.js'
import config from '@/components/chart/panel/config.vue'
const emit = defineEmits(['aaaa'])
const refConfig = ref(null)
const props = defineProps(['data','modelType','modelRow'])

const provideGlobalConfigEv = inject('provideGlobalConfigEv');
const provideModelConfigEv = inject('provideModelConfigEv');

const menus = shallowRef({
    menus: [
        {
            label: "模板配置",
            tip: '修改当前模板配置',
            click: () => {
                console.log('点击显示面板配置')
                refConfig.value.drawer = true
                refConfig.value.data
                refConfig.value.resetData(props.data)
                return true;
            }
        },
        {
            label: "模块配置",
            tip: '修改当前模块板配置',
            click: () => {
                console.log('点击显示面板配置',props)
                provideModelConfigEv(props.modelType,props.modelRow)
                return true;
            }
        },
        {
            label: "全局配置", tip: '修改全局配置', click: () => {
                console.log('点击显示面板配置')
                provideGlobalConfigEv()
                return true;
            }
        }
    ]
})
let timer = null;

onMounted(() => {
    getDataEv()

})

onActivated(() => {

})

const formatData = computed(() => {
    return formatDataEv(props.data)
})

const formatDataEv = (val) => {
    return {
        components: val.components,
        backgroundColor: val.backgroundColor,
        borderColor1: val.borderColor1,
        borderColor2: val.borderColor2,
        border: val.border,
        padding: myScale(val.padding) + 'px',
        pool: val.pool,
        pool_name: val.pool_name,
        sql: val.sql,
        nameFontSize: myScale(val.nameFontSize) + 'px',
        nameFontColor: val.nameFontColor,
        nameHeight: myScale(val.nameHeight) + 'px',
        titleFontSize: myScale(val.titleFontSize) + 'px',
        titleFontColor: val.titleFontColor,
        titleHeight: myScale(val.titleHeight) + 'px',
        contentFontSize: myScale(val.contentFontSize) + 'px',
        contentFontColor: val.contentFontColor,
        lineBackgroundColor: val.lineBackgroundColor,
        lineHeight: myScale(val.lineHeight) + 'px',
        text: val.text,
    }
}

const propsDataEv = (val) => {

    console.log('收到修改的内容')
    console.log(val)
    Object.assign(props.data, val)
    console.log(props.data.nameFontColor)
    emit('aaaa')
}

const getDataEv = async () => {
    console.log('面板数据')
    if (props.data.sql == '') {
        return
    }
    if (props.data.pool == '') {
        return
    }
    let data = {}
    data.pool = props.data.pool
    data.sql = props.data.sql
    data.components = props.data.components
    try {
        let arr_data = await ChartGetDataListPost(data)
        if (arr_data.status != 200) {
            return
        }
        props.data.text.contentLeft = arr_data.data.result.contentLeft
        props.data.text.contentRight = arr_data.data.result.contentRight
    } catch (error) {
        ElMessage.error('面板数据查询接口异常' + error)
    } finally {
        startTimerEv()
    }
}

// 启动定时器
const startTimerEv = () => {


    if (timer) clearInterval(timer);
    // 设置每秒滚动一行
    timer = setInterval(() => {

        getDataEv()

    }, props.data.time * 1000);
}

onUnmounted(() => {
    // 组件卸载记得清除计时器
    if (timer) clearInterval(timer);
    timer = null;
})

</script>

<style lang='less' scoped>
.show-panel {
    height: 100%;
    box-sizing: border-box;

    .panel-itm-top {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .panel-itm-bottom-itm {


        .panel-itm-bottom-itm-title {
            display: flex;
            align-items: center;
        }

        .panel-itm-bottom-itm-content {
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

}
</style>